<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" id="txt1">
  <select id="computed">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">除以</option>
    <option value="%">取余</option>
  </select>
  <input type="text" id="txt2">
  <input type="button" id="btn" value="=">
  <input type="text" id="result" readonly>
</body>
<script>

  // id选择器
  var txt1 = document.getElementById("txt1");
  var txt2 = document.getElementById("txt2");
  var btn = document.getElementById("btn");
  var com = document.getElementById("computed");
  var res = document.getElementById("result");

  // 给btn绑定click事件
  btn.onclick = function(){
    // 获取输入框内容
    var n1 = txt1.value-0;
    var n2 = txt2.value-0;
    var c = com.value;
    
    var sum = 0;
    // 根据符号判断要进行的运算
    switch(c){
      case "+":
        sum = n1 + n2;break;
      case "-":
        sum = n1 - n2;break;
      case "*":
        sum = n1 * n2;break;
      case "/":
        sum = n1 / n2;break;
      case "%":
        sum = n1 % n2;break;
    }
    // 将运算结果放入指定输入框
    res.value = sum;
  }




  
</script>
</html>